App.require(function () {
    var app = App.getCurrent();

    app.defineComponent("str-list", {
        render: function (next) {
            this.computedData();
            if (location.protocol === "file:") return next(this.renderHTML(App.staticHtml.strListCom));
            this.fetch("./index.html", function (text) {
                return next(this.renderHTML(text));
            })
        },
        getDomObj: function () {
            this.attachDom("[role='listitem']", "container")
                .attachEvent("container", "click", this.clickHandler, false);
        },
        clickHandler: function (ev) {
            this.dispatchCustomEvent("listclick", {
                event: ev,
                component: this,
                target: ev.target
            });
        },
        computedData: function () {
            var property = this.property;
            property.class = property.class || "";
            var slots = this.createList(property.slots);
            property.beforetype = property.beforetype || "";
            property.beforecontent = property.beforecontent || "";
            property.aftertype = property.aftertype || "";
            property.aftercontent = property.aftercontent || "";
            property.type = property.type || "single";
            if (slots.indexOf("before") > -1 || (property.beforetype && property.beforecontent)) {
                this.data.before = true;
                property.beforeClass = "before-" + property.beforetype;
            }
            if (slots.indexOf("after") > -1 || (property.aftertype && property.aftercontent)) {
                this.data.after = true;
                property.afterClass = "after-" + property.aftertype;
            }
            property.contentClass = "content-" + property.type;
            if (property.type) property.class += " str-list-" + property.type;
            this.data.propertystr = this.createPropertyStr({
                class: property.class, type: property.type
            });
        },
        createList: function (str) {
            if (str) return str.split(";");
            return [];
        },
        get className() {
            return this.property.class;
        },
        set className(value) {
            if (this.property.class === value) return;
            this.property.class = value;
            this.domList.container.className = value;
        },
        set before(obj) {
            var type = obj.type, content = obj.content, property = this.property;
            if (!this.data.before || (type === property.beforetype && content === property.beforecontent)) return;
            var slot = this.getSlotByName("before");
            if (slot.isOrigin) {
                var oldClass = "before-" + property.beforetype,
                    newClass = "before-" + type;
                var targetDom = this.domList.container.querySelector(".list-before");
                var that = this;
                var html = this.renderHTML('{{if type == icon}}' + 
                '<str-icon icon="{{content}}" width="24" height="24" nofocus></str-icon>' +
                '{{elseif type == avatar}}' +
                '<img src="{{content}}" alt="头像图标" />' +
                '{{elseif type == media}}' +
                '<img src="{{content}}" alt="媒体图标" />' +
                '{{/if}}', { type: type, content: content });
                this.innerHTML(targetDom, html, function () {
                    that.property.beforetype = type;
                    that.property.beforecontent = content;
                    targetDom.classList.remove(oldClass);
                    targetDom.classList.add(newClass);
                });
            }
            else {
                this.property.beforetype = type;
                this.property.beforecontent = content;
            }
        },
        set after(obj) {
            var type = obj.type, content = obj.content, property = this.property;
            if (!this.data.after || (type === property.aftertype && content === property.aftercontent)) return;
            var slot = this.getSlotByName("after");
            if (slot.isOrigin) {
                var oldClass = "after-" + property.aftertype,
                    newClass = "after-" + type;
                var targetDom = this.domList.container.querySelector(".list-after");
                var that = this;
                var html = this.renderHTML('{{if type == text}}' +
                '{{content}}' +
                '{{elseif type == icon}}' +
                '<str-icon icon="{{content}}" width="24" height="24"></str-icon>' +
                '{{/if}}', { type: type, content: content });
                this.innerHTML(targetDom, html, function () {
                    that.property.aftertype = type;
                    that.property.aftercontent = content;
                    targetDom.classList.remove(oldClass);
                    targetDom.classList.add(newClass);
                });
            }
            else {
                this.property.aftertype = type;
                this.property.aftercontent = content;
            }
        },
        get aftertype() {
            return this.property.aftertype;
        },
        get aftercontent() {
            return this.property.aftercontent;
        },
        get beforetype() {
            return this.property.beforetype;
        },
        get beforecontent() {
            return this.property.beforecontent;
        },
        get header() {
            return this.property.header;
        },
        set header(value) {
            if (value === this.property.header) return;
            var slot = this.getSlotByName("content");
            if (slot.isOrigin && this.property.type !== "single") {
                var h = this.domList.container.querySelector(".list-content>h3");
                h.textContent = value;
            }
            this.property.header = value;
        },
        get text() {
            return this.property.text;
        },
        set text(value) {
            if (value === this.property.text) return;
            var slot = this.getSlotByName("content");
            if (slot.isOrigin) {
                var targetDom;
                if (this.property.type == "single") {
                    targetDom = this.domList.container.querySelector(".list-content");
                }
                else {
                    targetDom = this.domList.container.querySelector(".list-content>div");
                }
                targetDom.textContent = value;
            }
            this.property.text = value;
        },
    });
})